﻿
@{
    ViewData["Title"] = "ModuleMenus";
    Layout = "~/Areas/Admin/Views/Shared/_VueLayout.cshtml";
}

@section header{
    <style>
        .handle-box {
            margin-bottom: 20px;
        }

        .handle-select {
            width: 120px;
        }

        .handle-input {
            width: 300px;
            display: inline-block;
        }

        .table {
            width: 100%;
            font-size: 14px;
        }

        .red {
            color: #ff0000;
        }

        .mr10 {
            margin-right: 10px;
        }

        .table-td-thumb {
            display: block;
            margin: auto;
            width: 40px;
            height: 40px;
        }

        /*表单*/
        .el-form-item {
            width: 23%
        }

        .el-dialog__header {
            background-color: rgb(51, 51, 51);
        }

        .el-dialog__title {
            color: antiquewhite
        }

        .bootstrap-elem-field {
            margin-bottom: 10px;
            padding: 0;
            padding-top: 10px;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
        }

            .bootstrap-elem-field legend {
                margin-left: 20px;
                padding: 0 10px;
                font-size: 16px;
                font-weight: 300;
                border-bottom: none;
                width: auto;
            }

        .bootstrap-field-box {
            padding: 10px 15px;
        }

        .el-table__body tr.current-row > td {
            background-color: #f5dc6f !important;
        }
    </style>
}

<div id="app" v-cloak>
    <div id='wrapper'>
        <div class="container">

            <el-card class="box-card" style="margin-bottom:10px;">
                <div slot="header" class="clearfix">
                    <i class="el-icon-s-order">产品列表</i>
                </div>

                <div class="handle-box">

                    <el-button type="primary" icon="el-icon-plus" v-on:click='handleAdd("add")' class="handle-del mr10">新增</el-button>

                    <el-button type="primary" icon="el-icon-edit" v-on:click='handleAdd("edit")' class="handle-del mr10">修改</el-button>

                    <el-button type="warning" icon="el-icon-delete" v-on:click='handleDelete' class="handle-del mr10">下架</el-button>

                    <el-select placeholder="产品状态" v-model="queryModel.status">
                        <el-option label="正常" :value="10"></el-option>
                        <el-option label="下架" :value="20"></el-option>
                    </el-select>
                    <el-select v-model="queryModel.platForm" placeholder="推广平台">
                        <el-option v-for="item in platFormList"
                                   :key="item.label"
                                   :label="item.label"
                                   :value="item.label">
                        </el-option>
                    </el-select>

                    <el-input v-model="queryModel.itemInfo" class='handle-input mr10' placeholder="请输入产品信息"></el-input>
                    <el-input v-model="queryModel.adInfo" class='handle-input mr10' placeholder="请输入广告信息" style="display:none;"></el-input>

                    <el-button type="primary" icon="el-icon-search" v-on:click="handleSearch">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh-left" v-on:click="handleReset">重置</el-button>

                </div>

                <el-table v-loading="loading" v-on:current-change="handleCurrentRowChange" :data="tableData" style="margin-bottom: 20px;"
                          highlight-current-row row-key="itemId" border ref="dataTable" v-on:row-click="handleSelect">
                    @*<el-table-column type="selection" sortable width="55">
        </el-table-column>*@
                    <el-table-column prop="itemCode" label="产品编号">
                    </el-table-column>
                    <el-table-column prop="itemName" label="产品名称">
                    </el-table-column>
                    <el-table-column prop="status" label="产品状态">
                        <template slot-scope="scope">
                            <el-tag v-show="scope.row.status==10">正常</el-tag>
                            <el-tag v-show="scope.row.status==20" type="danger">下架</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="platForm" label="平台">
                    </el-table-column>
                    <el-table-column prop="picUrl" label="图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.picUrl" :fit="fill" width="100" height="100" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="itemRemark" label="产品介绍">
                    </el-table-column>
                    @*<el-table-column prop="itemPrice" label="费用"style="display:none">
        </el-table-column>
        <el-table-column prop="adFactory" label="广告商" style="display:none">
        </el-table-column>
        <el-table-column prop="adName" label="广告名称" style="display:none;">
        </el-table-column>*@
                    @*<el-table-column prop="appId" label="小程序Id">
        </el-table-column>
        <el-table-column prop="appKey" label="小程序密钥">
        </el-table-column>
        <el-table-column prop="appName" label="小程序名称">
        </el-table-column>*@
                    <el-table-column prop="itemCat" label="所属栏目">
                    </el-table-column>
                    <el-table-column prop="qsCount" label="题目数">
                    </el-table-column>
                    <el-table-column prop="clickCount" label="点击数">
                    </el-table-column>
                    <el-table-column prop="isTop" label="是否推荐">
                        <template slot-scope="scope">
                            <el-tag v-show="scope.row.isTop==1">推荐</el-tag>
                            <el-tag v-show="scope.row.isTop==0" type="danger">不推荐</el-tag>
                        </template>
                    </el-table-column>
                </el-table>


                <div class="pagination" style="text-align: center;">
                    <el-pagination background v-on:current-change="handleCurrentChange" v-on:size-change='handleSizeChange' :current-page.sync="queryModel.pageModel.page" :page-sizes="[10, 20, 50, 80]"
                                   :page-size.sync="queryModel.pageModel.rows" layout="total,sizes, prev, pager, next" :total="total">
                    </el-pagination>

                </div>


            </el-card>


            <!-- 增改弹出框 -->
            <el-dialog :title="formModel.title" :visible.sync="formModel.editVisible" width="85%">
                <el-form :inline="true" :rules="rules" ref="formMain1" :model="formModel.model" label-width="85px" size="mini">
                    <fieldset class="bootstrap-elem-field" style=" background:#EBEEF5">
                        <legend>产品信息</legend>
                        <el-form-item label="产品编号" prop="itemCode">
                            <el-input v-model="formModel.model.itemCode"></el-input>
                        </el-form-item>
                        <el-form-item label="产品名称" prop="itemName">
                            <el-input v-model="formModel.model.itemName"></el-input>
                        </el-form-item>
                        <el-form-item label="产品链接" prop="itemUrl">
                            <el-input v-model="formModel.model.itemUrl"></el-input>
                        </el-form-item>
                        <el-form-item label="产品图片" prop="picUrl">
                            <el-input v-model="formModel.model.picUrl"></el-input>
                        </el-form-item>
                        <el-form-item label="产品价格" prop="itemPrice">
                            <el-input v-model="formModel.model.itemPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="所属栏目" prop="itemCat">
                            <el-input v-model="formModel.model.itemCat"></el-input>
                        </el-form-item>
                        <el-form-item label="题目数" prop="qsCount">
                            <el-input v-model="formModel.model.qsCount" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                        <el-form-item label="点击数量" prop="clickCount">
                            <el-input v-model="formModel.model.clickCount" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                        <el-form-item label="产品平台" prop="platForm" width="90%">
                            <el-select v-model="formModel.model.platForm" placeholder="请选择">
                                <el-option v-for="item in platFormList"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>

                        </el-form-item>
                        <el-form-item label="是否推荐" width="15%" prop="isTop">
                            <template>
                                <el-radio-group v-model="formModel.model.isTop">
                                    <el-radio-button label="1">推荐</el-radio-button>
                                    <el-radio-button label="0">不推荐</el-radio-button>
                                </el-radio-group>
                            </template>
                        </el-form-item>

                        <el-form-item label="产品简介" width="50%" prop="itemRemark">
                            <el-col :span="100">
                                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="formModel.model.itemRemark" placeholder="请输入产品简介......" maxlength="500" show-word-limit></el-input>
                            </el-col>
                        </el-form-item>

                    </fieldset>
                    <br />
                    <fieldset class="bootstrap-elem-field" style=" background:#EBEEF5;display:none;">
                        <legend>广告信息</legend>

                        <el-form-item label="广告厂家" prop="adFactory">
                            <el-input v-model="formModel.model.adFactory"></el-input>
                        </el-form-item>
                        <el-form-item label="广告编号" prop="adCode">
                            <el-input v-model="formModel.model.adCode"></el-input>
                        </el-form-item>
                        <el-form-item label="广告名称" prop="adName">
                            <el-input v-model="formModel.model.adName"></el-input>
                        </el-form-item>
                        <el-form-item label="广告链接" prop="adUrl">
                            <el-input v-model="formModel.model.adUrl"></el-input>
                        </el-form-item>

                    </fieldset>
                    <br />
                    <fieldset class="bootstrap-elem-field" style=" background:#EBEEF5; display:none;">
                        <legend>小程序信息</legend>

                        <el-form-item label="小程序Id" prop="appId">
                            <el-input v-model="formModel.model.appId"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序密钥" prop="appKey">
                            <el-input v-model="formModel.model.appKey"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序名称" prop="appName">
                            <el-input v-model="formModel.model.appName"></el-input>
                        </el-form-item>

                    </fieldset>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button v-on:click="formModel.editVisible = false">取 消</el-button>
                    <el-button type="primary" v-on:click="saveAdd">确 定</el-button>
                </span>
            </el-dialog>

            <el-dialog :title="formModel.title" :visible.sync="formModel.visible" width="85%">
                <el-form :inline="true" :rules="rules" ref="formMain" :model="formModel.model" label-width="85px" size="mini">
                    <fieldset class="bootstrap-elem-field" style=" background:#EBEEF5">
                        <legend>产品信息</legend>
                        <el-form-item label="产品编号" prop="itemCode">
                            <el-input v-model="formModel.model.itemCode"></el-input>
                        </el-form-item>
                        <el-form-item label="产品名称" prop="itemName">
                            <el-input v-model="formModel.model.itemName"></el-input>
                        </el-form-item>
                        <el-form-item label="产品链接" prop="itemUrl">
                            <el-input v-model="formModel.model.itemUrl"></el-input>
                        </el-form-item>
                        <el-form-item label="产品图片" prop="picUrl">
                            <el-input v-model="formModel.model.picUrl"></el-input>
                        </el-form-item>
                        <el-form-item label="产品价格" prop="itemPrice">
                            <el-input v-model="formModel.model.itemPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="所属栏目" prop="itemCat">
                            <el-input v-model="formModel.model.itemCat"></el-input>
                        </el-form-item>
                        <el-form-item label="题目数" prop="qsCount">
                            <el-input v-model="formModel.model.qsCount" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                        <el-form-item label="点击数量" prop="clickCount">
                            <el-input v-model="formModel.model.clickCount" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                        </el-form-item>
                        <el-form-item label="产品平台" prop="platFormArr" width="90%" id="platFormItem">
                            <el-select v-model="platFormArr" multiple placeholder="请选择" id="platFormSelect">
                                <el-option v-for="item in platFormList"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>

                        </el-form-item>
                        <el-form-item label="是否推荐" prop="isTop">
                            <template>
                                <el-radio-group v-model="formModel.model.isTop">
                                    <el-radio-button label="1">推荐</el-radio-button>
                                    <el-radio-button label="0">不推荐</el-radio-button>
                                </el-radio-group>
                            </template>
                        </el-form-item>
                        <el-form-item label="产品简介" prop="itemRemark">
                            <el-input type="textarea" :rows="2" v-model="formModel.model.itemRemark" placeholder="请输入产品简介......" maxlength="500" show-word-limit></el-input>
                        </el-form-item>
                    </fieldset>
                    <br />
                    <fieldset class="bootstrap-elem-field" style=" background:#EBEEF5;display:none;">
                        <legend>广告信息</legend>

                        <el-form-item label="广告厂家" prop="adFactory">
                            <el-input v-model="formModel.model.adFactory"></el-input>
                        </el-form-item>
                        <el-form-item label="广告编号" prop="adCode">
                            <el-input v-model="formModel.model.adCode"></el-input>
                        </el-form-item>
                        <el-form-item label="广告名称" prop="adName">
                            <el-input v-model="formModel.model.adName"></el-input>
                        </el-form-item>
                        <el-form-item label="广告链接" prop="adUrl">
                            <el-input v-model="formModel.model.adUrl"></el-input>
                        </el-form-item>

                    </fieldset>
                    <br />
                    <fieldset class="bootstrap-elem-field" style=" background:#EBEEF5; display:none;">
                        <legend>小程序信息</legend>

                        <el-form-item label="小程序Id" prop="appId">
                            <el-input v-model="formModel.model.appId"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序密钥" prop="appKey">
                            <el-input v-model="formModel.model.appKey"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序名称" prop="appName">
                            <el-input v-model="formModel.model.appName"></el-input>
                        </el-form-item>

                    </fieldset>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button v-on:click="formModel.visible = false">取 消</el-button>
                    <el-button type="primary" v-on:click="saveAdd">确 定</el-button>
                </span>
            </el-dialog>
        </div>

    </div>
</div>

@section footer{
    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: function () {
                return {
                    loading: false,
                    queryModel: {
                        status:"",
                        itemInfo: "",
                        adInfo: "",
                        platForm: "",
                        pageModel: {
                            page: 1,
                            rows: 10
                        }
                    },
                    itemId:"",
                    platFormList: [],
                    tableChecked: [],
                    tableData: [],
                    tableCurrentRow: null,
                    platFormArr:[],
                    total: 0,
                    viewVisible: false,
                    formModel: {
                        visible: false,
                        editVisible:false,
                        title: "",
                        view: "",
                        model: {
                            itemCode: '',
                            itemName: '',
                            itemUrl: "",
                            picUrl: "",
                            itemPrice: "",
                            platForm: "1",
                            adFactory: "",
                            adCode: '',
                            adName: "",
                            adUrl: "",
                            status: "10",
                            itemId: "",
                            appId: "",
                            appKey: "",
                            appName: "",
                            itemRemark: "",
                            clickCount: 0,
                            qsCount: 0,
                            itemCat: "",
                            isTop:0
                        }
                    },
                    viewModel: {

                    },
                    rules: {
                        itemCode: [{ required: true, message: '请输入产品编号' }],
                        itemName: [{ required: true, message: '请输入产品名称' }],
                        itemUrl: [{ required: true, message: '请输入产品链接' }],
                        picUrl: [{ required: true, message: '请输入图片链接' }],
                        //platFormArr: [{ required: true, message: '请选择平台' }],
                        qsCount: [{ required: true, message: '请输入题目数量' }],
                        clickCount: [{ required: true, message: '请输入点击数量' }],
                        itemCat: [{ required: true, message: '请输入所属栏目' }],
                        //itemRemark: [{ required: true, message: '请输入产品简介' }],
                        isTop: [{ required: true, message: '请选择是否推荐' }],
                        itemPrice: [{ required: true, message: '请输入产品价格' }],
                    }
                }
            },
            created() {
                var that = this;
                //this.queryModel.status = "-1";
                this.getDatas();
                this.getPlatFormList();
            },
            methods: {
                getDatas: function () {
                    var that = this;
                    that.loading = true;
                    request.post("/biz/item/query", that.queryModel).then(function (res) {
                        console.log(res.data);
                        that.tableData = res.data.data.rows;
                        that.total = res.data.data.total;
                        that.loading = false;
                    });
                },
                getPlatFormList: function () {
                    var that = this;
                    request.get('/admin/baseType/select?typeCode=PLATFORM').then(function (res) {
                        that.platFormList = res.data;
                    });
                },
                handleView: function (index, row) {
                    this.viewModel = row;
                    this.viewVisible = true;
                },
                handleSelectionChange: function (val) {
                    this.tableChecked = val;
                },
                handleSelect: function (row, index, e) {
                    this.tableCurrentRow = row;
                },
                handleCurrentChange: function (index) {
                    this.queryModel.pageModel.page = index;
                    this.getDatas();
                },
                handleSizeChange: function () {
                    this.getDatas();

                },
                handleSearch: function () {
                    this.getDatas();

                },
                handleCurrentRowChange: function (nowVal, oldVal) {
                    this.tableCurrentRow = nowVal;
                    this.itemId = nowVal.itemId;
                },
                handleAdd: function (type) {
                    var row = this.tableCurrentRow;
                    if (type == "edit") {
                        
                        var obj = JSON.parse(JSON.stringify(row));
                        this.formModel = {
                            editVisible: true,
                            view: type,
                            title: "修改产品",
                            model: obj
                        };
                        //this.platFormList.forEach((item, index) => {
                        //    if (item.lable == obj.platForm) {
                        //        this.formModel.model.platForm = item.value;
                        //        //break;
                        //    }
                        //}); 
                        for (var i = 0; i < this.platFormList.length; i++) {
                            if (this.platFormList[i].label == obj.platForm) {
                                this.formModel.model.platForm = this.platFormList[i].value;
                                //row.platForm = this.platFormList[i].value;
                                break;
                            }
                        }
                        
                    } else if (type == "add") {
                        this.formModel = {
                            visible: true,
                            view: type,
                            title: "添加产品",
                            model: {

                            }

                        };

                    }

                },
                saveAdd: function () {
                    var that = this;
                    if (this.formModel.view == "add") {
                        that.formModel.model.status = "10";
                        var plats = "";
                        if (that.platFormArr.length > 0) {
                            for (var i = 0; i < that.platFormArr.length; i++) {
                                plats = plats+"," + that.platFormArr[i];
                            }
                            plats = plats.substring(1);
                        } else {
                            this.$message.warning("请选择平台！");
                            return;
                        }
                        that.formModel.model.platForm = plats;
                        
                        this.$refs["formMain"].validate((valid) => {
                            if (valid) {
                                request.post("/biz/item/add", that.formModel.model).then(function (res) {
                                    if (res.data.code == 1) {
                                        that.$message.success(res.data.msg);
                                    } else {
                                        that.$message.warning(res.data.msg);
                                    }
                                    that.formModel.visible = false;
                                    that.getDatas();
                                });
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                        
                    } else if (this.formModel.view == "edit") {
                        that.saveUpdate();
                    }
                    
                },
                saveUpdate: function () {
                    var that = this;
                    
                    this.$refs["formMain1"].validate((valid) => {
                        if (valid) {
                            request.put("/biz/item/update", that.formModel.model).then(function (res) {
                                if (res.data.code == 1) {
                                    that.$message.success(res.data.msg);
                                } else {
                                    that.$message.warning(res.data.msg);
                                }
                                that.formModel.editVisible = false;
                                that.getDatas();
                                that.tableCurrentRow = null;
                                that.$refs.dataTable.setCurrentRow();
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                handleReset: function () {
                    this.queryModel.status = "-1";
                    this.queryModel.adInfo = "";
                    this.queryModel.itemInfo = "";
                    this.getDatas();
                },
                handleDelete: function () {
                    var that = this;
                    
                    if (this.tableCurrentRow.status == "20") {
                        this.$message.warning("该产品已是下架状态！");
                        return;

                    }
                    
                    this.$confirm('确定要下架该产品吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        var obj = JSON.parse(JSON.stringify(that.tableCurrentRow));
                        obj.status = "20";
                        //that.formModel.model.status = "20";
                        //that.formModel.model.itemId = that.tableCurrentRow.itemId;
                        //that.formModel.model.itemPrice = that.tableCurrentRow.itemPrice;
                        request.put("/biz/item/delete?itemId="+obj.itemId).then(function (res) {
                            if (res.data.code == 1) {
                                that.$message.success(res.data.msg);
                            } else {
                                that.$message.warning(res.data.msg);
                            }
                            that.getDatas();
                            that.tableCurrentRow = null;
                            that.$refs.dataTable.setCurrentRow();
                        });

                    });

                }


            }

        });

    </script>

}